<template>
    <div class="regist">
        <el-form :rules="rules" v-model="regist" style="width: 400px;padding-top: 20px;margin-left: 40px;"
      ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
            label="用户名"
            prop="username"
        >
            <el-input  v-model="regist.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="密码"
            prop="password"
        > <el-input type="password" v-model="regist.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="学校"
            prop="school"
        > <el-input type="text" v-model="regist.school" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="昵称"
            prop="nickname"
        > <el-input type="text" v-model="regist.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="年龄"
            prop="age"
        > <el-input type="text" v-model="regist.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="性别"
            prop="gender"
        > <el-input type="text" v-model="regist.gender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>已有账号？ 
            <router-link :to="{name:'login'}" >去登陆</router-link>
            </el-form-item>
        <el-form-item>
            <el-button style="width:100px" type="primary" @click="jump">注册</el-button>
        </el-form-item>
        </el-form>
        
    </div>

</template>
<script>
export default ({
    name:'regist',
    data(){
        //表单正则验证
        let reg = /^[a-zA-Z0-9]{6,16}$/;
        let validateUsername = (rule, value, callback)=>{
            let res = reg.test(this.regist.username)
            if(this.regist.username == null || !res){
                return callback(new Error('请输入正确长度的6-16位英文数字下划线减号组成'))
            }else{
               console.log(this.regist.username)
            }
        }
        let validatePassword = (rule, value, callback)=>{
            let res = reg.test(this.regist.password)
            if(this.regist.password == null || !res){
                return callback(new Error('请输入正确的密码长度应在6-15位英文数字组成'))
            }else{
                console.log(this.regist.password)
            }
        }
        let validateSchool = (rule, value, callback)=>{
            if(this.regist.school == null ){
                return callback(new Error('请输入学校名'))
            }else{
                console.log(this.regist.school)
            }
        }
        let validateNickname = (rule, value, callback)=>{
            if(this.regist.nickname == null ){
                return callback(new Error('请输入昵称'))
            }else{
                console.log(this.regist.nickname)
            }
        }
        let validateAge = (rule, value, callback)=>{
            if(this.regist.age == null || this.regist.age >= 120){
                return callback(new Error('请输入正确的年龄'))
            }else{
                console.log(this.regist.age)
            }
        }
        let validateGender = (rule, value, callback)=>{
            if(this.regist.gender == null ){
                return callback(new Error('请选择性别'))
            }else{
                console.log(this.regist.gender)
            }
        }
        return{
            regist:{
                username:'',
                password:'',
                school:'',
                nickname:'',
                age:'',
                gender:''
            },
            rules:{
                username:[
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password:[
                    { validator: validatePassword, trigger: 'blur' }
                ],
                school:[
                    { validator: validateSchool, trigger: 'blur' }
                ],
                nickname:[
                    { validator: validateNickname, trigger: 'blur' }
                ],
                age:[
                    { validator: validateAge, trigger: 'blur' }
                ],
                gender:[
                    { validator: validateGender, trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        async jump(){
            //注册请求
            this.regist.gender === '男' ? 0 : 1
            const data = await this.aPost('/user/regist',this.regist);
            if(data.success == true){
                this.$router.push({
                    name:'login'
                })
            }
        }
    }
})
</script>
<style >
.regist{
    width: 600px;
    height: 500px;
    margin:100px auto;
    box-shadow: 0 0 6px #333;
}
</style>
